// 基本信息
import { serviceAdd, serviceMod } from "@/api/modules/service/service";
import DialogBox from "@/components/DialogBox";
import SelectGagewayDialog from "@/components/Sansan/GatewayDialog/SelectGagewayDialog";
import LazyUploadFile from "@/components/Upload/LazyUploadFile.vue";
import { ResultEnum } from "@/enums/httpEnum";
import { ElForm } from "element-plus";
import { defineComponent } from "vue";
import { showTips } from "../../../../utils/util";
import "../server.scss";
import { dataFormat } from "../../../../utils/format";
import { ServiceStatusTypes } from "@/enums/statusEnum";
import OnlineStatus from "@/components/Sansan/OnlineStatus/OnlineStatus";
import { getDictObj } from "@/utils/cacheUtil";
export default defineComponent({
	props: {
		detail: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	emits: ["submit", "ok"],
	setup(props, { attrs, emit }) {
		const serviceStatusLabels = ref<any>({});
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const uploadEl = ref();
		const formRule = reactive({
			name: [{ required: true, message: "请输入程序名称", trigger: "change" }],
			instanceId: [{ required: true, message: "服务标识不能为空", trigger: "change" }]
		});
		onMounted(async () => {
			serviceStatusLabels.value = await getDictObj("service_status");
		});
		watchEffect(() => {
			if (attrs.visible && !props.detail.svcType) {
				props.detail.svcType = "applet";
			}
		});
		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					let api = props.detail.id ? serviceMod : serviceAdd;
					let { code, result, message } = await api(props.detail);
					//操作失败
					if (code != ResultEnum.SUCCESS) {
						showTips(code, message);
						return;
					}

					//直接提交表单
					if (!uploadEl.value || uploadEl.value.getFile() || props.detail.svcType != "applet") {
						emit("submit");
						showTips(code, message);
						return;
					}
					//上传文件
					uploadEl.value.submit({ id: result });
				}
			});
		};
		const uploadSuccess = (res: any) => {
			showTips(res.code, "添加服务", res.message);
			emit("submit");
		};
		return () => {
			return (
				<DialogBox
					{...attrs}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="pr-8">
						{props.detail.readonly ? (
							<div class="pl-8">
								<el-alert
									class="server-info-tips"
									style="line-height: 1;margin-bottom:20px"
									title={props.detail.svcType == "dockerapp" ? "Docker应用" : "普通应用"}
									type="info"
									description={
										props.detail.svcType == "dockerapp" ? "使用dockor容器打包的一个或多个进程" : "部署在服务器或网关上的单个进程"
									}
								/>
								<el-form class="readonly-form" model={props.detail} ref={formRef} rules={formRule} label-width="85px">
									<el-form-item label="运行状态：">
										<OnlineStatus
											labels={serviceStatusLabels.value}
											onlineLabel="未知"
											offlineLabel="未知"
											types={ServiceStatusTypes}
											v-model={props.detail.status}
										></OnlineStatus>
									</el-form-item>
									<el-form-item label="服务名称：">{props.detail.name || "--"}</el-form-item>
									<el-form-item label="服务类型：">{props.detail.svcType == "applet" ? "普通应用" : "Docker应用"}</el-form-item>
									<el-form-item label="服务标识：">{props.detail.instanceId || "--"}</el-form-item>
									<el-form-item label="启动参数：">{props.detail.arg || "--"}</el-form-item>
									<el-form-item label="部署节点：">
										{props.detail.machine == "local" ? "本地应用" : props.detail.machine || "--"}
									</el-form-item>
									<el-form-item label={props.detail.svcType == "dockerapp" ? "镜像地址：" : "运行路径："}>
										{props.detail.path || "--"}
									</el-form-item>
									{props.detail.svcType == "applet" ? (
										<el-form-item label="服务程序：">{props.detail.bin || "--"}</el-form-item>
									) : null}
									<el-form-item label="程序版本：">{props.detail.version || "--"}</el-form-item>
									<el-form-item label="IP地址：">{props.detail.ip || "--"}</el-form-item>
									<el-form-item label="更新时间：">{dataFormat("datetime", props.detail.updateTime) || "--"}</el-form-item>
									{/* <el-form-item label="登录时间：">{dataFormat("datetime", props.detail.loginTime) || "--"}</el-form-item> */}
									{/* <el-form-item label="注册时间：">{dataFormat("datetime", props.detail.registerTime) || "--"}</el-form-item> */}
									<el-form-item label="创建时间：">{dataFormat("datetime", props.detail.createTime) || "--"}</el-form-item>
									<el-form-item label="服务描述：">{props.detail.remark || "--"}</el-form-item>
								</el-form>
							</div>
						) : (
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
								<el-form-item label="服务类型" prop="svcType">
									<el-radio-group v-model={props.detail.svcType} disabled={props.detail.id ? true : false}>
										<el-radio label="applet">普通应用</el-radio>
										<el-radio label="dockerapp">Docker应用</el-radio>
									</el-radio-group>
									<el-alert
										class="server-info-tips"
										style="line-height: 1;margin-top: 15px;"
										title={props.detail.svcType == "dockerapp" ? "Docker应用" : "普通应用"}
										type="info"
										description={
											props.detail.svcType == "dockerapp"
												? "使用dockor容器打包的一个或多个进程"
												: "部署在服务器或网关上的单个进程"
										}
									/>
								</el-form-item>
								<el-form-item label="服务名称" prop="name">
									<el-input v-model={props.detail.name} />
								</el-form-item>
								<el-form-item label="服务标识" prop="instanceId">
									<el-input v-model={props.detail.instanceId} />
								</el-form-item>
								<el-form-item label="启动参数" prop="arg">
									<el-input v-model={props.detail.arg} />
								</el-form-item>
								{"local" != props.detail.machine ? (
									<el-form-item label="部署节点" prop="machine">
										<SelectGagewayDialog detail={props.detail} gatewayKey="machine" class="w-full"></SelectGagewayDialog>
									</el-form-item>
								) : null}
								<el-form-item label="服务描述" prop="remark">
									<el-input v-model={props.detail.remark} type="textarea" auto-size />
								</el-form-item>
								{props.detail.svcType == "dockerapp" ? (
									<el-form-item label="镜像地址" prop="path">
										<el-input v-model={props.detail.path} placeholder="Docker镜像地址" />
									</el-form-item>
								) : (
									<el-form-item label="服务程序" prop="bin">
										<div class="form-item-upload">
											{props.detail.bin ? (
												<div class="file-info ">
													{props.detail.bin}
													<el-link
														type="primary"
														class="delete-server-file ml-2 leading-3"
														onClick={() => (props.detail.bin = "")}
													>
														重新上传
													</el-link>
												</div>
											) : null}
											<LazyUploadFile
												style={{ display: props.detail.bin ? "none" : "block" }}
												title={!props.detail.id ? "请输入服务名称" : "点击选服务程序"}
												ref={uploadEl}
												showTips={false}
												showIcon={false}
												disabled={!props.detail.name}
												v-model:fileUrl={props.detail.bin}
												v-model:fileName={props.detail.bin}
												onSuccess={uploadSuccess}
												width="150px"
												height="32px"
												emptyTips="请上传服务程序"
											></LazyUploadFile>
										</div>
									</el-form-item>
								)}
							</el-form>
						)}
					</div>
				</DialogBox>
			);
		};
	}
});
